import React, { useEffect, useState } from 'react';
import { Select, Space, Input, Button, Radio, Table, Modal, Switch, Form, message, Upload, InputNumber } from 'antd';
import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
import type { RadioChangeEvent, SelectProps } from 'antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import type { UploadChangeParam } from 'antd/es/upload';
import { getOne, getAdd } from '@/apis/goodsCategory'
import MeUpload from '../../components/MeUpload'

type Props = {
    isModalOpen: boolean,
    modelClose(value: boolean): void
}
type SizeType = Parameters<typeof Form>[0]['size'];
const handle = (value: string) => {
};
const Change = (value: number | null) => {
};

const AddClassify = (props: Props) => {
    const [value, setValue] = useState(1);
    const [myArr, setMyArr] = useState<any[]>([])
    const [imgUrl, setImgUrl] = useState('');
    const [iconUrl,setIconUrl]=useState('');
    const [componentSize, setComponentSize] = useState<SizeType | 'default'>('default');
    const [form]=Form.useForm()
    const [list, setList] = useState([
        { value: 'jack', label: 'Jack' },
        { value: 'lucy', label: 'Lucy' },
        { value: 'Yiminghe', label: 'yiminghe' },
        { value: 'disabled', label: 'Disabled', disabled: true },
    ])
    useEffect(() => {
        const arr = list.map((item: any) => {
            return { value: item._id, label: item.title }
        })
        setMyArr(arr)
        fetchData()
    }, [list])
    const setLoad = (img: any) => {
        console.log("img", img)
        setImgUrl(img.path);
    }
    const getLoad = (val: any) => {
        console.log("mm", val);
        setIconUrl(val.path);
    }
    const onFinish = async (values:any) => {
        console.log(values);
    }
    const fetchData = async () => {
        const res = await getOne()
        setList(res.data);
    }
    const onChange = (e: RadioChangeEvent) => {
        setValue(e.target.value);
    };
    const handleCancel = () => {
        props.modelClose(false)
    };
    const onFormLayoutChange = ({ size }: { size: SizeType }) => {
        setComponentSize(size);
    };
    const handleOk = async () => {
        props.modelClose(false)
        const a=form.getFieldsValue();
        a.img = imgUrl;
        a.icon = iconUrl;
        console.log("a",a);
        const res = await getAdd({...a})
        console.log("666",res)
        fetchData()
    };
    return (
        <div>
            <Modal title="添加分类" open={props.isModalOpen} onOk={handleOk} onCancel={handleCancel} destroyOnClose={true}>
                <Form
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 14 }}
                    layout="horizontal"
                    initialValues={{ size: componentSize }}
                    onValuesChange={onFormLayoutChange}
                    size={componentSize as SizeType}
                    form={form}
                    style={{ maxWidth: 600 }}
                    onFinish={onFinish}
                >
                    <Form.Item name="pid" label="上级分类：">
                        <Select
                            defaultValue=""
                            style={{ width: 274 }}
                            onChange={handle}
                            options={myArr}
                        />
                    </Form.Item>
                    <Form.Item name='title' label="分类名称：">
                        <Input />
                    </Form.Item>
                    <Form.Item name="icon" label='分类图标'>
                        <MeUpload setLoad={setLoad}></MeUpload>
                    </Form.Item>
                    <Form.Item name='img' label='分类大图'>
                        <MeUpload setLoad={getLoad}></MeUpload>
                    </Form.Item>
                    <Form.Item name='sort' label="排序：">
                        <InputNumber min={0} max={100} defaultValue={0} onChange={Change} />
                    </Form.Item>

                    <Form.Item name='state' label='状态'>
                        <Radio.Group onChange={onChange} value={value}>
                            <Radio value={1}>显示</Radio>
                            <Radio value={2}>隐藏</Radio>
                        </Radio.Group>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )
}

export default AddClassify